<style type="text/less" lang="less" scoped>
    @import url('./index.less');
</style>

<template>
    <div class="ps-panel" style="height: 100%">
        <div class="ps-panel-head">
            <i class="ps-panel-head-icon iconfont icon-list"></i>
            <span class="ps-panel-head-title">数据列表</span>
        </div>

        <div class="ps-panel-body">
            <el-container style="height: 100%;">
                <el-aside width="300px" class="content-left-list">

                    <div class="left-list">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox :label="node.id" :key="node.id" v-for="node in nodeList">
                                <p class="subclass-list">ID：{{node.id}}</p>
                                <p class="subclass-detail" :title="node.name">
                                    <i class="iconfont icon-user"></i>{{node.name}}
                                </p>
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="pagination">
                        <el-pagination small
                                       :page-size="paginations.pageSize"
                                       :layout="paginations.layout"
                                       :total="paginations.total"
                                       :current-page='paginations.pageIndex'
                                       :pager-count="5"
                                       @current-change='jump'
                                       style="text-align: center;">
                        </el-pagination>
                    </div>

                    <div class="content-left-action">
                        <button @click="cancelSel" ref="node_all_check">全选</button>
                        <button class="left-action-activate" @click="importNode">读取</button>
                    </div>

                </el-aside>
                <el-main style="position: relative; padding: 0">
                    <div ref="details_info">
                    </div>
                    <el-button type="primary" style="position: absolute; right: 10px; bottom: 10px; background-color:#3579f8;" @click="saveNode">导入</el-button>
                </el-main>
            </el-container>
        </div>

        <el-dialog title="情报整合" :visible.sync="dialogVisible" @open="htInit2" width="50%">
            <el-container>
                <el-main style="padding: 0; height: 400px;">
                    <el-main ref="details_infos" style="position: relative; padding: 0; height: calc(100% - 60px)">
                    </el-main>
                    <el-footer>
                            <span class="dialog-footer">
                                <el-button @click="mergeNode" type="success">拼 合</el-button>
                            </span>
                    </el-footer>
                </el-main>
                <el-aside width="200px" style="background-color: #eee;">
                    <div class="grid-content bg-purple-light">
                        <el-menu default-active="1">
                            <el-menu-item-group>
                                <span slot="title">冲突属性</span>
                                <el-menu-item index="1">
                                    <span slot="title">舰长</span>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-menu>
                    </div>
                </el-aside>
            </el-container>
        </el-dialog>
    </div>
</template>

<script>
    import Vue from "vue";

    export default {
        name: "database",
        data() {
            return {
                isCollapse: false,
                nodeList: [],
                checkList: [],
                htData: [],
                dialogVisible: false,
                selNode: {},
                paginations: {
                    pageIndex: 1,   // 当前位于哪页
                    pageSize: 50,   // 页显示多少条
                    total: 0,       // 总数
                    layout: "total, prev, pager, next"   // 翻页属性
                }
            };
        },
        watch: {
            '$route': function () {
                this.checkList = [];
                this.$refs.details_info.innerHTML = '';
                this.jump(1);
            }
        },
        methods: {
            cancelSel() {
                const node_all_check = this.$refs.node_all_check;
                if (node_all_check.innerHTML == '全选') {
                    this.nodeList.forEach((item) => {
                        this.checkList.push(item.id);
                    });
                    node_all_check.innerHTML = '取消';
                } else {
                    this.checkList = [];
                    node_all_check.innerHTML = '全选';
                }
            },
            importNode() {
                let $this = this;
                this.$store.dispatch('ajax', {
                    url: 'api/comparison/queryComparisonDate', method: 'post', data: {dicLabelAttId: Number.parseInt(this.$route.query.dicLabelAttId), idList: this.checkList}, succeed: function (res) {
                        $this.htData = [];
                        // $this.htData.push({
                        //     id: 1,
                        //     name:'111',
                        //     state:1,
                        //     property:{
                        //         '研发单位': {state: 1, value: '研发单位'},
                        //     }
                        // });

                        res.rows.forEach(function (item) {
                            let entity = {};
                            // let ignoreField = ['id', 'name', 'node', 'firstTitle', 'secondTitle', 'title', 'remark', 'introduce', 'imageRight', 'imageLeft', 'website'];

                            entity['id'] = item.id;
                            entity['name'] = item.name;
                            entity['labelName'] = item.label_name;
                            entity['state'] = item.status;
                            entity['property'] = [];
                            entity['RelationshipNode'] = [];

                            for (let key in item.calsssPropertyList) {
                                let item2 = item.calsssPropertyList[key];

                                // if (ignoreField.indexOf(key) !== -1) {
                                //     continue;
                                // }
                                entity['property'][item2.name] = {state: item2.status, value: item2.value};
                            }

                            // item.repositoryNeo4j.forEach(function (item2) {
                            //     let RelationshipNode = {
                            //         // id: item2.id.value,
                            //         name: item2['名称'],
                            //         state: item2.status,
                            //         property: []
                            //     };
                            //     for (let key in item2) {
                            //         let item3 = item2[key];
                            //
                            //         // if (ignoreField.indexOf(key) !== -1) {
                            //         //     continue;
                            //         // }
                            //         RelationshipNode['property'][key] = {value: item3};
                            //     }
                            //     entity['RelationshipNode'].push(RelationshipNode);
                            // });


                            $this.htData.push(entity);
                        });

                        $this.htInit();
                    }
                })
            },
            mergeNode() {
                let node = this.htData[this.selNode];

                for (let key in node.property) {
                    let item = node.property[key];
                    if (item.state == 4) {
                        item.state = 3;
                        item.value = node.property[key].value[0];
                    }
                }

                this.htInit();
                this.dialogVisible = false;
            },
            htInit() {
                let $this = this;
                new ht.Node();
                let nodes = {
                    "v": "6.1.5",
                    "p": {
                        "autoAdjustIndex": true,
                        "hierarchicalRendering": false
                    },
                    "d": []
                };

                let form = new ht.widget.FormPane();
                form.setWidth(100);
                form.setHeight(125);
                form.setRowHeight(18);
                let formView = form.getView();
                let details_info = this.$refs.details_info;
                details_info.innerHTML = '';
                details_info.appendChild(formView);//将表单添加进body中
                formView.style.top = '0px';//ht组件几乎都设置绝对路径
                formView.style.left = '0px';
                let legend = [
                    {name: '新增实体', color: 'rgb(52,119,248)'},
                    {name: '新增属性', color: 'rgb(23,217,156)'},
                    {name: '已有实体', color: 'rgb(249,200,82)'},
                    {name: '关联实体', color: 'rgb(242,156,177)'},
                    {name: '冲突', color: 'rgb(241,77,104)'}
                ];

                legend.forEach(function (item) {
                    form.addRow([//向表单中添加行
                        {//这一行中的第一个表单项
                            button: {//向表单中添加button按钮
                                icon: {
                                    "width": 16,
                                    "height": 16,
                                    "comps": [
                                        {
                                            "type": "oval",
                                            "background": item.color,
                                            "borderColor": "#979797",
                                            // "rect": [4,0,16,16]
                                        }
                                    ]
                                },//设置按钮的图标
                                background: '',//设置按钮的背景
                                borderColor: '',//设置按钮的边框颜色
                            }
                        },
                        {
                            element: item.name,
                            font: 'bold 12px arial, sans-serif',
                            color: '#000',
                            align: 'left'
                        }
                    ], [0.1, 0.2]);//第二个参数是设置第一参数中的数组的宽度，小于1是比例，大于1是实际宽度。第三个参数是该行的高度
                });

                let dataModel = new ht.DataModel();
                let graphView = new ht.graph.GraphView(dataModel);
                let view = graphView.getView();
                let moveXY = 0;
                view.className = 'main';

                details_info.appendChild(view);
                let style = graphView.getView().style;
                style.left = '0';
                style.top = '0';
                style.right = '0';
                style.bottom = '0';

                // view.addEventListener('click', function (e) {
                //     if (moveXY === 0 && $(e.target).hasClass('system-red')) {
                //         $this.dialogVisible = true;
                //         $this.selNode = $(e.target).attr('data-index');
                //     }
                //     moveXY = 0;
                // });
                view.addEventListener('mousedown', function (e) {
                    moveXY = e.clientX + e.clientY;
                });
                view.addEventListener('mouseup', function (e) {
                    moveXY -= moveXY === 0 ? 0 : e.clientX + e.clientY;
                });

                let no = 1;
                this.htData.forEach(function (entity, index) {
                    let nodeColor = '';
                    let nodeIcon = '';

                    switch (entity.state) {
                        case 1:
                            nodeColor = 'system-blue';
                            break;
                        case 2:
                            nodeColor = 'system-yellow';
                            break;
                        // case 0:
                        //     nodeColor = 'system-pink';
                        //     break;
                        // case 1:
                        //     nodeColor = 'system-blue';
                        //     break;
                        // case 2:
                        //     nodeColor = 'system-green';
                        //     break;
                        // case 3:
                        //     nodeColor = 'system-yellow';
                        //     break;
                        // case 4:
                        //     nodeColor = 'system-red';
                        //     break;
                    }
                    switch ($this.$route.query.tableName) {
                        case '舰艇':
                            nodeIcon = 'icon-logistics';
                            break;
                        case '火炮':
                            nodeIcon = 'icon-jinangaopao';
                            break;
                        default:
                            nodeIcon = 'icon-jinangaopao';
                            break;
                    }

                    let node = {
                        "c": "ht.HtmlNode",
                        "i": no++,
                        "p": {
                            "name": entity.name,
                            "html": `<div class="system ${nodeColor}"><i class="iconfont ${nodeIcon}"></i></div>`
                        },
                        "s": {
                            "label.font": "8px Aria"
                        }
                    };
                    nodes.d.push(node);

                    for (let key in entity['property']) {
                        const property = entity['property'][key];

                        if (property.value == undefined) {
                            continue;
                        }

                        let propertyColor = '';
                        switch (property.state) {
                            case 1:
                                propertyColor = 'system-green';
                                break;
                            case 3:
                                propertyColor = 'system-red';
                                break;
                            // case 0:
                            //     nodeColor = 'system-pink';
                            //     break;
                            // case 1:
                            //     propertyColor = 'system-blue';
                            //     break;
                            // case 2:
                            //     propertyColor = 'system-green';
                            //     break;
                            // case 3:
                            //     propertyColor = 'system-yellow';
                            //     break;
                            // case 4:
                            //     propertyColor = 'system-red';
                            //     break;
                        }

                        if (property.state != 2) {
                            let propertyNode = {
                                "c": "ht.HtmlNode",
                                "i": no++,
                                "p": {
                                    "html": `<div class="system system-property ${propertyColor}" data-index="${index}" title="${property.value}">${property.value}</div>`
                                }
                            };
                            nodes.d.push(propertyNode);

                            let edge = {
                                "c": "ht.Edge",
                                "i": no++,
                                "p": {
                                    "source": {
                                        "__i": node.i
                                    },
                                    "target": {
                                        "__i": propertyNode.i
                                    }
                                },
                                "s": {
                                    "label": key,
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            };
                            nodes.d.push(edge);
                        }
                    }


                    entity['RelationshipNode'].forEach(function (item) {
                        let relColor = 'system-pink';

                        // switch (item.state) {
                        //     case 0:
                        //         relColor = 'system-pink';
                        //         break;
                        //     case 1:
                        //         relColor = 'system-blue';
                        //         break;
                        //     case 2:
                        //         relColor = 'system-green';
                        //         break;
                        //     case 3:
                        //         relColor = 'system-yellow';
                        //         break;
                        //     case 4:
                        //         relColor = 'system-red';
                        //         break;
                        // }

                        let node2 = {
                            "c": "ht.HtmlNode",
                            "i": no++,
                            "p": {
                                "name": item.name,
                                "html": `<div class="system ${relColor}"><i class="iconfont icon-taikongmanbuyi"></i></div>`
                            },
                            "s": {
                                "label.font": "8px Aria"
                            }
                        };
                        nodes.d.push(node2);

                        let edgeRel = {
                            "c": "ht.Edge",
                            "i": no++,
                            "p": {
                                "source": {
                                    "__i": node.i
                                },
                                "target": {
                                    "__i": node2.i
                                }
                            },
                            "s": {
                                "label.color": "gray",
                                "label.font": "6px arial",
                                "edge.width": 0.5,
                                "edge.color": "gray",
                                "icons": {
                                    "toArrow": {
                                        "position": 19,
                                        "keepOrien": true,
                                        "width": 30,
                                        "height": 15,
                                        "names": ["toArrow"]
                                    }
                                }
                            }
                        };
                        nodes.d.push(edgeRel);

                        for (let key in item['property']) {
                            const property = item['property'][key];

                            if (property.value == undefined) {
                                continue;
                            }

                            // let propertyColor = '';
                            // switch (property.state) {
                            //     case 0: nodeColor = 'system-pink'; break;
                            //     case 1: propertyColor = 'system-blue'; break;
                            //     case 2: propertyColor = 'system-green'; break;
                            //     case 3: propertyColor = 'system-yellow'; break;
                            //     case 4: propertyColor = 'system-red'; break;
                            // }

                            let propertyNode = {
                                "c": "ht.HtmlNode",
                                "i": no++,
                                "p": {
                                    "html": `<div class="system system-property ${relColor}" title="${property.value}">${property.value}</div>`
                                }
                            };
                            nodes.d.push(propertyNode);

                            let edge = {
                                "c": "ht.Edge",
                                "i": no++,
                                "p": {
                                    "source": {
                                        "__i": node2.i
                                    },
                                    "target": {
                                        "__i": propertyNode.i
                                    }
                                },
                                "s": {
                                    "label": key,
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            };
                            nodes.d.push(edge);
                        }
                    });

                });

                graphView.dm().deserialize(nodes);
                let autoLayout = new ht.layout.AutoLayout(graphView);
                autoLayout.setAnimate(true);
                autoLayout.layout('circular', function () {
                    graphView.fitContent(true);
                });

                // console.log(JSON.stringify(nodes),111);
            },
            htInit2() {
                let $this = this;
                Vue.nextTick(function () {
                    let details_info = $this.$refs.details_infos.$el;
                    let dataModel = new ht.DataModel(),
                        graphView = new ht.graph.GraphView(dataModel);
                    let view = graphView.getView();
                    view.className = 'main';
                    details_info.innerHTML = '';
                    details_info.appendChild(view);

                    let style = graphView.getView().style;
                    style.left = '0';
                    style.top = '0';
                    style.right = '0';
                    style.bottom = '0';

                    let htData = {
                        "v": "6.1.5",
                        "p": {
                            "autoAdjustIndex": true,
                            "hierarchicalRendering": false
                        },
                        "d": [{
                            "c": "ht.HtmlNode",
                            "i": 1,
                            "p": {
                                "name": "1986式100毫米反坦克炮",
                                "html": "<div class=\"system system-yellow\"><i class=\"iconfont icon-jinangaopao\"></i></div>"
                            },
                            "s": {
                                "label.font": "8px Aria"
                            }
                        }, {
                            "c": "ht.HtmlNode",
                            "i": 2,
                            "p": {
                                "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"20世纪80年代初期\">20世纪80年代初期</div>"
                            }
                        }, {
                            "c": "ht.Edge",
                            "i": 3,
                            "p": {
                                "source": {
                                    "__i": 1
                                },
                                "target": {
                                    "__i": 2
                                }
                            },
                            "s": {
                                "label": "研发时间",
                                "label.color": "gray",
                                "label.font": "6px arial",
                                "edge.width": 0.5,
                                "edge.color": "gray",
                                "icons": {
                                    "toArrow": {
                                        "position": 19,
                                        "keepOrien": true,
                                        "width": 30,
                                        "height": 15,
                                        "names": ["toArrow"]
                                    }
                                }
                            }
                        }, {
                            "c": "ht.HtmlNode",
                            "i": 4,
                            "p": {
                                "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"中口径炮\">中口径炮</div>"
                            }
                        }, {
                            "c": "ht.Edge",
                            "i": 5,
                            "p": {
                                "source": {
                                    "__i": 1
                                },
                                "target": {
                                    "__i": 4
                                }
                            },
                            "s": {
                                "label": "口径",
                                "label.color": "gray",
                                "label.font": "6px arial",
                                "edge.width": 0.5,
                                "edge.color": "gray",
                                "icons": {
                                    "toArrow": {
                                        "position": 19,
                                        "keepOrien": true,
                                        "width": 30,
                                        "height": 15,
                                        "names": ["toArrow"]
                                    }
                                }
                            }
                        }, {
                            "c": "ht.HtmlNode",
                            "i": 6,
                            "p": {
                                "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"13,705米\">13,705米</div>"
                            }
                        }, {
                            "c": "ht.Edge",
                            "i": 7,
                            "p": {
                                "source": {
                                    "__i": 1
                                },
                                "target": {
                                    "__i": 6
                                }
                            },
                            "s": {
                                "label": "最大射程",
                                "label.color": "gray",
                                "label.font": "6px arial",
                                "edge.width": 0.5,
                                "edge.color": "gray",
                                "icons": {
                                    "toArrow": {
                                        "position": 19,
                                        "keepOrien": true,
                                        "width": 30,
                                        "height": 15,
                                        "names": ["toArrow"]
                                    }
                                }
                            }
                        }, {
                            "c": "ht.HtmlNode",
                            "i": 8,
                            "p": {
                                "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"9,520毫米\">9,520毫米</div>"
                            }
                        }, {
                            "c": "ht.Edge",
                            "i": 9,
                            "p": {
                                "source": {
                                    "__i": 1
                                },
                                "target": {
                                    "__i": 8
                                }
                            },
                            "s": {
                                "label": "炮管长度",
                                "label.color": "gray",
                                "label.font": "6px arial",
                                "edge.width": 0.5,
                                "edge.color": "gray",
                                "icons": {
                                    "toArrow": {
                                        "position": 19,
                                        "keepOrien": true,
                                        "width": 30,
                                        "height": 15,
                                        "names": ["toArrow"]
                                    }
                                }
                            }
                        }, {
                            "c": "ht.HtmlNode",
                            "i": 10,
                            "p": {
                                "html": "<div class=\"system system-property system-red\" data-index=\"0\" title=\"中国北方工业公司\">中国北方工业公司</div>"
                            },
                            "a": {
                                "state": 4
                            }
                        }, {
                            "c": "ht.Edge",
                            "i": 11,
                            "p": {
                                "source": {
                                    "__i": 1
                                },
                                "target": {
                                    "__i": 10
                                }
                            },
                            "s": {
                                "label": "研发单位",
                                "label.color": "gray",
                                "label.font": "6px arial",
                                "edge.width": 0.5,
                                "edge.color": "gray",
                                "icons": {
                                    "toArrow": {
                                        "position": 19,
                                        "keepOrien": true,
                                        "width": 30,
                                        "height": 15,
                                        "names": ["toArrow"]
                                    }
                                }
                            }
                        }, {
                            "c": "ht.HtmlNode",
                            "i": 12,
                            "p": {
                                "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"3,610千克\">3,610千克</div>"
                            }
                        }, {
                            "c": "ht.Edge",
                            "i": 13,
                            "p": {
                                "source": {
                                    "__i": 1
                                },
                                "target": {
                                    "__i": 12
                                }
                            },
                            "s": {
                                "label": "总重",
                                "label.color": "gray",
                                "label.font": "6px arial",
                                "edge.width": 0.5,
                                "edge.color": "gray",
                                "icons": {
                                    "toArrow": {
                                        "position": 19,
                                        "keepOrien": true,
                                        "width": 30,
                                        "height": 15,
                                        "names": ["toArrow"]
                                    }
                                }
                            }
                        }, {
                            "c": "ht.HtmlNode",
                            "i": 14,
                            "p": {
                                "html": "<div class=\"system system-property system-red\" data-index=\"0\" title=\"800米/秒\">800米/秒</div>"
                            },
                            "a": {
                                "state": 4
                            }
                        }, {
                            "c": "ht.Edge",
                            "i": 15,
                            "p": {
                                "source": {
                                    "__i": 1
                                },
                                "target": {
                                    "__i": 14
                                }
                            },
                            "s": {
                                "label": "炮口初速",
                                "label.color": "gray",
                                "label.font": "6px arial",
                                "edge.width": 0.5,
                                "edge.color": "gray",
                                "icons": {
                                    "toArrow": {
                                        "position": 19,
                                        "keepOrien": true,
                                        "width": 30,
                                        "height": 15,
                                        "names": ["toArrow"]
                                    }
                                }
                            }
                        },

                            {
                                "c": "ht.HtmlNode",
                                "i": 1000001,
                                "p": {
                                    "name": "1986式100毫米反坦克炮",
                                    "html": "<div class=\"system system-yellow\"><i class=\"iconfont icon-jinangaopao\"></i></div>"
                                },
                                "s": {
                                    "label.font": "8px Aria"
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 1000002,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"20世纪80年代初期\">20世纪80年代初期</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 1000003,
                                "p": {
                                    "source": {
                                        "__i": 1000001
                                    },
                                    "target": {
                                        "__i": 1000002
                                    }
                                },
                                "s": {
                                    "label": "研发时间",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 1000004,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"中口径炮\">中口径炮</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 1000005,
                                "p": {
                                    "source": {
                                        "__i": 1000001
                                    },
                                    "target": {
                                        "__i": 1000004
                                    }
                                },
                                "s": {
                                    "label": "口径",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 1000006,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"13,705米\">13,705米</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 1000007,
                                "p": {
                                    "source": {
                                        "__i": 1000001
                                    },
                                    "target": {
                                        "__i": 1000006
                                    }
                                },
                                "s": {
                                    "label": "最大射程",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 1000008,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"9,520毫米\">9,520毫米</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 1000009,
                                "p": {
                                    "source": {
                                        "__i": 1000001
                                    },
                                    "target": {
                                        "__i": 1000008
                                    }
                                },
                                "s": {
                                    "label": "炮管长度",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 10000010,
                                "p": {
                                    "html": "<div class=\"system system-property system-red\" data-index=\"0\" title=\"北方工业\">北方工业</div>"
                                },
                                "a": {
                                    "state": 4
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 10000011,
                                "p": {
                                    "source": {
                                        "__i": 1000001
                                    },
                                    "target": {
                                        "__i": 10000010
                                    }
                                },
                                "s": {
                                    "label": "研发单位",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 10000012,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"3,610千克\">3,610千克</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 10000013,
                                "p": {
                                    "source": {
                                        "__i": 1000001
                                    },
                                    "target": {
                                        "__i": 10000012
                                    }
                                },
                                "s": {
                                    "label": "总重",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 10000014,
                                "p": {
                                    "html": "<div class=\"system system-property system-red\" data-index=\"0\" title=\"900米/秒\">900米/秒</div>"
                                },
                                "a": {
                                    "state": 4
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 10000015,
                                "p": {
                                    "source": {
                                        "__i": 1000001
                                    },
                                    "target": {
                                        "__i": 10000014
                                    }
                                },
                                "s": {
                                    "label": "炮口初速",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }
                        ]
                    };

                    if ($this.$route.query.tableName == 'jcjt') {
                        htData = {
                            "v": "6.1.5",
                            "p": {
                                "autoAdjustIndex": true,
                                "hierarchicalRendering": false
                            },
                            "d": [{
                                "c": "ht.HtmlNode",
                                "i": 1,
                                "p": {
                                    "name": "辽宁舰",
                                    "html": "<div class=\"system system-yellow\"><i class=\"iconfont icon-logistics\"></i></div>"
                                },
                                "s": {
                                    "label.font": "8px Aria"
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 2,
                                "p": {
                                    "html": "<div class=\"system system-property system-red\" data-index=\"0\" title=\"304.5米\">304.5米</div>"
                                },
                                "a": {
                                    "state": 4
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 3,
                                "p": {
                                    "source": {
                                        "__i": 1
                                    },
                                    "target": {
                                        "__i": 2
                                    }
                                },
                                "s": {
                                    "label": "舰长",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 4,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"2012年9月25日\">2012年9月25日</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 5,
                                "p": {
                                    "source": {
                                        "__i": 1
                                    },
                                    "target": {
                                        "__i": 4
                                    }
                                },
                                "s": {
                                    "label": "服役时间",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 6,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"1988年12月4日\">1988年12月4日</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 7,
                                "p": {
                                    "source": {
                                        "__i": 1
                                    },
                                    "target": {
                                        "__i": 6
                                    }
                                },
                                "s": {
                                    "label": "下水时间",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 8,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"29节\">29节</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 9,
                                "p": {
                                    "source": {
                                        "__i": 1
                                    },
                                    "target": {
                                        "__i": 8
                                    }
                                },
                                "s": {
                                    "label": "航速",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 10,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"瓦良格号\">瓦良格号</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 11,
                                "p": {
                                    "source": {
                                        "__i": 1
                                    },
                                    "target": {
                                        "__i": 10
                                    }
                                },
                                "s": {
                                    "label": "前型",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 12,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"尼古拉耶夫造船厂，大连造船厂\">尼古拉耶夫造船厂，大连造船厂</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 13,
                                "p": {
                                    "source": {
                                        "__i": 1
                                    },
                                    "target": {
                                        "__i": 12
                                    }
                                },
                                "s": {
                                    "label": "制造厂",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 14,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"50000吨以上\">50000吨以上</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 15,
                                "p": {
                                    "source": {
                                        "__i": 1
                                    },
                                    "target": {
                                        "__i": 14
                                    }
                                },
                                "s": {
                                    "label": "满排吨位",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 16,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"75米\">75米</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 17,
                                "p": {
                                    "source": {
                                        "__i": 1
                                    },
                                    "target": {
                                        "__i": 16
                                    }
                                },
                                "s": {
                                    "label": "型宽",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 18,
                                "p": {
                                    "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"被中国改装后现在中国人民解放军海军服役\">被中国改装后现在中国人民解放军海军服役</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 19,
                                "p": {
                                    "source": {
                                        "__i": 1
                                    },
                                    "target": {
                                        "__i": 18
                                    }
                                },
                                "s": {
                                    "label": "现状",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            }, {
                                "c": "ht.HtmlNode",
                                "i": 20,
                                "p": {
                                    "html": "<div class=\"system system-property system-green\" data-index=\"0\" title=\"1985年12月6日\">1985年12月6日</div>"
                                }
                            }, {
                                "c": "ht.Edge",
                                "i": 21,
                                "p": {
                                    "source": {
                                        "__i": 1
                                    },
                                    "target": {
                                        "__i": 20
                                    }
                                },
                                "s": {
                                    "label": "建造时间",
                                    "label.color": "gray",
                                    "label.font": "6px arial",
                                    "edge.width": 0.5,
                                    "edge.color": "gray",
                                    "icons": {
                                        "toArrow": {
                                            "position": 19,
                                            "keepOrien": true,
                                            "width": 30,
                                            "height": 15,
                                            "names": ["toArrow"]
                                        }
                                    }
                                }
                            },
                                {
                                    "c": "ht.HtmlNode",
                                    "i": 1000001,
                                    "p": {
                                        "name": "辽宁舰 (图数据库)",
                                        "html": "<div class=\"system system-yellow\"><i class=\"iconfont icon-logistics\"></i></div>"
                                    },
                                    "s": {
                                        "label.font": "8px Aria"
                                    }
                                }, {
                                    "c": "ht.HtmlNode",
                                    "i": 1000002,
                                    "p": {
                                        "html": "<div class=\"system system-property system-red\" data-index=\"0\" title=\"304米\">304米</div>"
                                    },
                                    "a": {
                                        "state": 4
                                    }
                                }, {
                                    "c": "ht.Edge",
                                    "i": 1000003,
                                    "p": {
                                        "source": {
                                            "__i": 1000001
                                        },
                                        "target": {
                                            "__i": 1000002
                                        }
                                    },
                                    "s": {
                                        "label": "舰长",
                                        "label.color": "gray",
                                        "label.font": "6px arial",
                                        "edge.width": 0.5,
                                        "edge.color": "gray",
                                        "icons": {
                                            "toArrow": {
                                                "position": 19,
                                                "keepOrien": true,
                                                "width": 30,
                                                "height": 15,
                                                "names": ["toArrow"]
                                            }
                                        }
                                    }
                                }, {
                                    "c": "ht.HtmlNode",
                                    "i": 1000004,
                                    "p": {
                                        "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"2012年9月25日\">2012年9月25日</div>"
                                    }
                                }, {
                                    "c": "ht.Edge",
                                    "i": 1000005,
                                    "p": {
                                        "source": {
                                            "__i": 1000001
                                        },
                                        "target": {
                                            "__i": 1000004
                                        }
                                    },
                                    "s": {
                                        "label": "服役时间",
                                        "label.color": "gray",
                                        "label.font": "6px arial",
                                        "edge.width": 0.5,
                                        "edge.color": "gray",
                                        "icons": {
                                            "toArrow": {
                                                "position": 19,
                                                "keepOrien": true,
                                                "width": 30,
                                                "height": 15,
                                                "names": ["toArrow"]
                                            }
                                        }
                                    }
                                }, {
                                    "c": "ht.HtmlNode",
                                    "i": 1000006,
                                    "p": {
                                        "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"1988年12月4日\">1988年12月4日</div>"
                                    }
                                }, {
                                    "c": "ht.Edge",
                                    "i": 1000007,
                                    "p": {
                                        "source": {
                                            "__i": 1000001
                                        },
                                        "target": {
                                            "__i": 1000006
                                        }
                                    },
                                    "s": {
                                        "label": "下水时间",
                                        "label.color": "gray",
                                        "label.font": "6px arial",
                                        "edge.width": 0.5,
                                        "edge.color": "gray",
                                        "icons": {
                                            "toArrow": {
                                                "position": 19,
                                                "keepOrien": true,
                                                "width": 30,
                                                "height": 15,
                                                "names": ["toArrow"]
                                            }
                                        }
                                    }
                                }, {
                                    "c": "ht.HtmlNode",
                                    "i": 1000008,
                                    "p": {
                                        "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"29节\">29节</div>"
                                    }
                                }, {
                                    "c": "ht.Edge",
                                    "i": 1000009,
                                    "p": {
                                        "source": {
                                            "__i": 1000001
                                        },
                                        "target": {
                                            "__i": 1000008
                                        }
                                    },
                                    "s": {
                                        "label": "航速",
                                        "label.color": "gray",
                                        "label.font": "6px arial",
                                        "edge.width": 0.5,
                                        "edge.color": "gray",
                                        "icons": {
                                            "toArrow": {
                                                "position": 19,
                                                "keepOrien": true,
                                                "width": 30,
                                                "height": 15,
                                                "names": ["toArrow"]
                                            }
                                        }
                                    }
                                }, {
                                    "c": "ht.HtmlNode",
                                    "i": 10000010,
                                    "p": {
                                        "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"瓦良格号\">瓦良格号</div>"
                                    }
                                }, {
                                    "c": "ht.Edge",
                                    "i": 10000011,
                                    "p": {
                                        "source": {
                                            "__i": 1000001
                                        },
                                        "target": {
                                            "__i": 10000010
                                        }
                                    },
                                    "s": {
                                        "label": "前型",
                                        "label.color": "gray",
                                        "label.font": "6px arial",
                                        "edge.width": 0.5,
                                        "edge.color": "gray",
                                        "icons": {
                                            "toArrow": {
                                                "position": 19,
                                                "keepOrien": true,
                                                "width": 30,
                                                "height": 15,
                                                "names": ["toArrow"]
                                            }
                                        }
                                    }
                                }, {
                                    "c": "ht.HtmlNode",
                                    "i": 10000012,
                                    "p": {
                                        "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"尼古拉耶夫造船厂，大连造船厂\">尼古拉耶夫造船厂，大连造船厂</div>"
                                    }
                                }, {
                                    "c": "ht.Edge",
                                    "i": 10000013,
                                    "p": {
                                        "source": {
                                            "__i": 1000001
                                        },
                                        "target": {
                                            "__i": 10000012
                                        }
                                    },
                                    "s": {
                                        "label": "制造厂",
                                        "label.color": "gray",
                                        "label.font": "6px arial",
                                        "edge.width": 0.5,
                                        "edge.color": "gray",
                                        "icons": {
                                            "toArrow": {
                                                "position": 19,
                                                "keepOrien": true,
                                                "width": 30,
                                                "height": 15,
                                                "names": ["toArrow"]
                                            }
                                        }
                                    }
                                }, {
                                    "c": "ht.HtmlNode",
                                    "i": 10000014,
                                    "p": {
                                        "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"50000吨以上\">50000吨以上</div>"
                                    }
                                }, {
                                    "c": "ht.Edge",
                                    "i": 10000015,
                                    "p": {
                                        "source": {
                                            "__i": 1000001
                                        },
                                        "target": {
                                            "__i": 10000014
                                        }
                                    },
                                    "s": {
                                        "label": "满排吨位",
                                        "label.color": "gray",
                                        "label.font": "6px arial",
                                        "edge.width": 0.5,
                                        "edge.color": "gray",
                                        "icons": {
                                            "toArrow": {
                                                "position": 19,
                                                "keepOrien": true,
                                                "width": 30,
                                                "height": 15,
                                                "names": ["toArrow"]
                                            }
                                        }
                                    }
                                }, {
                                    "c": "ht.HtmlNode",
                                    "i": 10000016,
                                    "p": {
                                        "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"75米\">75米</div>"
                                    }
                                }, {
                                    "c": "ht.Edge",
                                    "i": 10000017,
                                    "p": {
                                        "source": {
                                            "__i": 1000001
                                        },
                                        "target": {
                                            "__i": 10000016
                                        }
                                    },
                                    "s": {
                                        "label": "型宽",
                                        "label.color": "gray",
                                        "label.font": "6px arial",
                                        "edge.width": 0.5,
                                        "edge.color": "gray",
                                        "icons": {
                                            "toArrow": {
                                                "position": 19,
                                                "keepOrien": true,
                                                "width": 30,
                                                "height": 15,
                                                "names": ["toArrow"]
                                            }
                                        }
                                    }
                                }, {
                                    "c": "ht.HtmlNode",
                                    "i": 10000018,
                                    "p": {
                                        "html": "<div class=\"system system-property system-yellow\" data-index=\"0\" title=\"被中国改装后现在中国人民解放军海军服役\">被中国改装后现在中国人民解放军海军服役</div>"
                                    }
                                }, {
                                    "c": "ht.Edge",
                                    "i": 10000019,
                                    "p": {
                                        "source": {
                                            "__i": 1000001
                                        },
                                        "target": {
                                            "__i": 10000018
                                        }
                                    },
                                    "s": {
                                        "label": "现状",
                                        "label.color": "gray",
                                        "label.font": "6px arial",
                                        "edge.width": 0.5,
                                        "edge.color": "gray",
                                        "icons": {
                                            "toArrow": {
                                                "position": 19,
                                                "keepOrien": true,
                                                "width": 30,
                                                "height": 15,
                                                "names": ["toArrow"]
                                            }
                                        }
                                    }
                                }, {
                                    "c": "ht.HtmlNode",
                                    "i": 10000020,
                                    "p": {
                                        "html": "<div class=\"system system-property system-green\" data-index=\"0\" title=\"1985年12月6日\">1985年12月6日</div>"
                                    }
                                }, {
                                    "c": "ht.Edge",
                                    "i": 10000021,
                                    "p": {
                                        "source": {
                                            "__i": 1000001
                                        },
                                        "target": {
                                            "__i": 10000020
                                        }
                                    },
                                    "s": {
                                        "label": "建造时间",
                                        "label.color": "gray",
                                        "label.font": "6px arial",
                                        "edge.width": 0.5,
                                        "edge.color": "gray",
                                        "icons": {
                                            "toArrow": {
                                                "position": 19,
                                                "keepOrien": true,
                                                "width": 30,
                                                "height": 15,
                                                "names": ["toArrow"]
                                            }
                                        }
                                    }
                                }]
                        };
                    }

                    const json = [
                        {
                            label: "选择",
                            action: function () {
                                this.node.addStyleIcon('alarm', {
                                    position: 24,
                                    width: 18,
                                    height: 18,
                                    names: ['alarm-icon']
                                });
                            },
                        },
                        {
                            label: "取消选择",
                            action: function () {
                                this.node.removeStyleIcon('alarm');
                            },
                        }
                    ];
                    const contextmenu = new ht.widget.ContextMenu();
                    contextmenu.enableGlobalKey();
                    contextmenu.setLabelMaxWidth(200);
                    contextmenu.addTo(view);
                    contextmenu.beforeShow = function (e) {
                        let node = graphView.getDataAt(e);

                        if (node instanceof ht.HtmlNode && node._attrObject.state && node._attrObject.state == 4) {
                            this.setItems(json);
                            this.node = node;
                        } else {
                            this.setItems(null);
                        }
                    };

                    graphView.dm().deserialize(htData);
                    let autoLayout = new ht.layout.AutoLayout(graphView);
                    autoLayout.setAnimate(true);
                    autoLayout.layout('circular', function () {
                        graphView.fitContent(true);
                    });
                });


            },
            jump(i) {
                this.checkList = [];
                this.$refs.node_all_check.innerHTML = '全选';
                if (i === undefined) {
                    i = this.paginations.pageIndex;
                } else {
                    this.paginations.pageIndex = i;
                }

                if (this.$route.query.dicLabelAttId) {
                    this.$store.dispatch('ajax', {
                        url: 'api/comparison/queryMySqlTableDate', method: 'get', data: {dicLabelAttId: this.$route.query.dicLabelAttId, page: i, number: this.paginations.pageSize},
                        succeed:
                            (res) => {
                                this.nodeList = res.rows;
                                this.paginations.total = res.total;
                            }
                    });
                }
            },
            saveNode() {
                let data = [];
                for (const item of this.htData) {
                    let temp = {labelName: item.label_name, name: item.name, type: item.state};

                    for (const key in item.property) {
                        const item2 = item.property[key];
                        if (item2.state == 1) {
                            temp[key] = item2.value;
                        }
                    }
                    data.push(temp);
                }

                if (data.length === 0) {
                    this.$message.warning('请选择读取数据');
                    return;
                }

                // console.log(this.htData, data);return;
                this.$store.dispatch('ajax', {
                    url: 'api/comparison/saveComparisonDate', method: 'post', data: {data: data}, succeed: () => {
                        this.$message.success('导入成功');
                    }
                });

            }
        },
        mounted: function () {
            ht.Default.setImage('toArrow', {
                width: 100,
                height: 50,
                comps: [
                    {
                        type: 'shape',
                        points: [2, 25, 30, 25],
                        borderWidth: 1,
                    },
                    {
                        type: 'shape',
                        points: [15, 5, 30, 25, 15, 45, 50, 25, 15, 5],
                        background: 'gray',
                        borderWidth: 1,
                    },
                ]
            });
            ht.Default.setImage('alarm-icon', {
                width: 100,
                height: 100,
                // opacity: { func: 'attr@alarm.opacity' },
                comps: [
                    {
                        type: 'circle',
                        rect: [2, 2, 96, 96],
                        background: {
                            value: 'green',
                            func: 'attr@alarm.color'
                        }
                    },
                    {
                        type: 'rect',
                        rotation: Math.PI / 4,
                        rect: [52, 30, 10, 40],
                        background: 'white'
                    },
                    {
                        type: 'rect',
                        rotation: 90.1,
                        rect: [35, 48, 10, 20],
                        background: 'white'
                    }
                ]
            });

            this.jump(1);
        }
    }
</script>